<!DOCTYPE html>
<html>
	<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<head>
		<meta charset="utf-8">
		<title>登录</title>
	</head>
	<body class="row" style="background-color: #f2f2f2;">
		<div id="app" class="container" style="margin-top: 150px;">
			<div class="col-md-4"></div>
			<div class="col-md-4">
				<form class="form-inline">
					<div class="form-group" style="margin-left: 100px;">
						<h1 for="exampleInputName2">登录</h1>
					</div>
					<br />
					<br />
					<div class="form-group">
						<label for="exampleInputName2">账号</label>
						<input v-model="account" type="text" class="form-control" id="exampleInputEmail3" placeholder="Email">
					</div>
					<br />
					<br />
					<div class="form-group">
						<label for="exampleInputName2">密码</label>
						<input v-model="password" type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
					</div>
					<br />
					<br />
					<button @click.prevent="singIn()" type="submit" style="margin-left: 100px;" class="btn btn-default">登录</button>
				</form>
			</div>
			<div class="col-md-4"></div>
		</div>
		<script src="layui/layui.all.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			
			var app = new Vue({
				el:"#app",
				data:{
					account:"",
					password:""
				},
				created() {
					// this.show();
				},
				methods:{
					//登录按钮的操作
					singIn(){
						//使用axios的Ajax请求
						axios.post('http://localhost:8080/user/register', {
							account:app.account,
							password:app.password
						})
						.then(function (response) {
							console.log(response.data);
							//判断账号密码是否正确
							var value = response.data.code
							//取出Token
							var data = response.data.information
							//如果正确
							if(value == 100){
								//将Token存入浏览器(客户端)
								localStorage.setItem("token",data)
								//进行输出
								layer.msg(response.data.message)
								//跳转到登录成功的页面
								location.href="admin_admin.html"
							}
							// layer.msg(response.data.information)
						})
						//请求发生意想不到的错误
						.catch(function (error) {
							//打印错误
							console.log(error);
						});
					}
				},
			})
		</script>
	</body>
</html>
